Ghaleb Saidi
Loading Project Reel...
Back to Feature Films

PM ACCELERATOR

AI/ML Weather App Design Assessment

Design Assessment • Mobile Application • 2025

Director's Brief

The Story

PM Accelerator, an AI/ML education platform, required a weather application design assessment. The challenge was creating a user-centric mobile weather app serving two distinct user personas with different weather information needs.

My Role

Lead UI/UX Designer responsible for complete design process from research through high-fidelity prototyping, including user persona development, information architecture design, and comprehensive interface solutions.

The Vision

I focused on creating a dual-purpose interface that seamlessly serves both business travelers and long-term planners through intelligent information hierarchy, customizable views, and intuitive navigation patterns.

View Interactive Prototype
Company PM Accelerator
Duration 7 Days
Role UI/UX Designer
Type Mobile App Assessment
Tools
Figma UI/UX Design Prototyping
SCENE 01

Client Requirements

Target Audiences

Primary: Business Travelers

Business travelers needing multi-location weather data with time zone considerations for quick decision-making across different cities.

Secondary: Long-term Planners

Long-term planners requiring 1-month, 3-month, and 6-month weather forecasts for strategic seasonal planning.

Key Features Requested

Multi-Location Tracking

  • Add/remove/reorder functionality
  • Quick location comparison
  • Time zone considerations

5-Day Detailed Forecast

  • Hourly breakdowns
  • Daily planning views
  • Weather trend analysis

Real-time Current Conditions

  • Live weather updates
  • Current temperature display
  • Weather condition indicators

User Preference Customization

  • Units (Celsius/Fahrenheit)
  • Notification settings
  • Theme options

Technical Requirements

Mobile-first design approach ensuring optimal experience across all device sizes with responsive layouts and touch-friendly interactions.

High-fidelity prototype with smooth interactions demonstrating realistic user flows and professional-grade interface animations.

Integration of PM Accelerator branding maintaining visual consistency with company identity and design standards.

SCENE 02

My Design Process

01

User Research & Persona Development

I analyzed the two distinct user groups and their contrasting needs:

Business travelers require quick, comparative weather data across multiple cities for immediate travel decisions and schedule planning.

Long-term planners need seasonal trends and extended forecasting for strategic planning, event organization, and long-term decision making.

02

Information Architecture

Created intuitive navigation flow prioritizing user goals:

  • Home screen for quick location comparison
  • Detailed forecast for immediate planning needs
  • Dedicated long-term section for seasonal planning
  • Streamlined settings for personalization
Information Architecture
Weather App Wireframe
03

Design System Creation

Developed cohesive visual language:

  • Dark theme optimized for various lighting conditions
  • Yellow accent colors for optimal visibility and brand consistency
  • Card-based layout system for scalable content organization
  • Typography hierarchy for enhanced readability
Design System
Design System
SCENE 03

Key Design Solutions

Multi-Location Management

Drag-and-Drop Reordering

Personalized priority management for frequently accessed locations with intuitive card-based reordering system.

Quick-Add Functionality

Search interface for rapid location addition with smart suggestions and autocomplete features.

Three-Dot Menu System

Streamlined location management with edit, remove, and favorite options accessible through context menus.

Visual Weather Indicators

Instant comparison capabilities through clear iconography and color-coded weather status displays.

5-Day Forecast Optimization

Prominent current temperature for immediate context

Horizontal hourly scrolling for detailed daily planning

Vertical 5-day overview for quick weekly scanning

Comprehensive weather details (humidity, wind, precipitation) in expandable overview

Long-Term Planning Interface

Toggle system for 1M/3M/6M views

Weekly average displays for strategic planning

Seasonal trend indicators for contextual insights

Consistent navigation maintaining user familiarity

SCENE 04

Final Designs

High-Fidelity Prototype

Final Design
REC
Weather App High-Fidelity Design
View Figma Design File View Interactive Prototype

Prototype in Action

SCENE 05

Design Decisions & Trade-offs

Screen Real Estate vs. Information Density

Rather than overwhelming users with data, I implemented a clean bottom navigation separating immediate forecasts from long-term planning, ensuring each user type gets focused, relevant information.

Visual Hierarchy

Prioritized current temperature as the primary visual element, with supporting details accessible but not overwhelming, based on typical user scanning patterns.

Accessibility Considerations

High Contrast Ratios

Optimized for outdoor visibility with strong color contrast ensuring readability in various lighting conditions.

Large Touch Targets

Mobile interaction optimized with appropriately sized buttons and interactive elements for easy navigation.

Clear Iconography

Weather icons paired with text labels ensuring understanding across different user groups and accessibility needs.

Consistent Patterns

Uniform interaction patterns throughout the app reducing cognitive load and improving user experience.

SCENE 06

Project Outcomes

Assessment Results

Successfully met all client requirements within 7-day timeline, demonstrating:

User-Centered Design

Deep understanding of user-centered design principles with clear persona-based solutions addressing distinct user needs.

Professional Visual Design

Professional-grade visual design execution with cohesive design system and polished interface elements.

Strategic Thinking

Strategic thinking in solving complex user experience challenges with innovative multi-persona solutions.

Technical Proficiency

Demonstrated mastery of design tools and methodologies with production-ready deliverables.

Key Achievements

Dual-Persona Experience

Created intuitive dual-persona experience serving both business travelers and long-term planners seamlessly.

Scalable Design System

Developed comprehensive, scalable design system ensuring consistency and future expandability.

Production-Ready Prototype

Delivered high-fidelity, interactive prototype ready for development handoff with realistic interactions.

Methodology Mastery

Demonstrated comprehensive understanding of design process from research through final implementation.

SCENE 07

Additional Value Delivered

Beyond Requirements

Design System Documentation

Comprehensive design system documentation for seamless development handoff with detailed specifications.

Interactive Prototype

Fully interactive prototype with realistic data scenarios demonstrating complete user flows and interactions.

Accessibility Focus

Comprehensive accessibility considerations ensuring inclusive design for diverse user groups and needs.

Performance Optimization

Performance-optimized asset organization with efficient file structure for smooth development integration.

More From This Director

Other projects in the portfolio

Monple Project
View Project

Monple

Finance App UI/UX Design

Comprehensive finance management interface with multi-input methods

MBITS Innovations
View Project

MBITS Innovations

Mobile App Redesign

WelNest app screen enhancement focusing on user engagement

Patra Technologies
View Project

Patra Technologies

E-book Layout Design

Typography hierarchy and reading experience optimization